<template>
  <div class="pager-container">
      <a @click="handleClick(1)" :class="{ disabled: current === 1 }">|&lt;&lt;</a>
      <a @click="handleClick(current - 1)" :class="{ disabled: current === 1 }">&lt;</a>
      <!-- ---------------- -->
      <a @click="handleClick(item)" v-for="(item, idx) in nums" :key="idx" :class="{ active: current === item }">{{ item }}</a>
      <!-- ---------------- -->
      <a @click="handleClick(current + 1)" :class="{ disabled: current === pageNum }">&gt;</a>
      <a @click="handleClick(pageNum)" :class="{ disabled: current === pageNum }">&gt;&gt;|</a>
<!-- 
    <h6>总页码：{{ pageNum }}；
      左页码：{{ leftNum }}
      右页码：{{ rightNum }}
    </h6> -->
  </div>
</template>

<script>
export default {
  props: {
    current: {// 当前页码
      type: Number,
      default: 1
    },
    visibleNumber: {// 页码容量
      type: Number,
      default: 10
    },
    limit: {// 页数据容量
      type: Number,
      default: 10
    },
    total: {// 数据总量
      type: Number,
      default: 10
    }
  },
  computed: {
    // 总页码
    pageNum() {
      return Math.ceil(this.total / this.limit)
    },
    // 左侧页码
    leftNum() {
      let min = this.current - Math.floor(this.visibleNumber / 2)
      // 跳至最左侧保持可见页码数
      if (min < 1) min = 1
      // 跳至最右侧保持可见页码数
      if (min > this.pageNum - this.visibleNumber + 1) min = this.pageNum - this.visibleNumber + 1
      return min
    },
    // 右侧页码
    rightNum() {
      let max = this.leftNum + this.visibleNumber - 1
      if (max > this.pageNum) max = this.pageNum
      return max
    },
    // 返回页码数组
    nums() {
      let arr = []
      for(let i = this.leftNum; i <= this.rightNum; i++) {
        arr.push(i)
      }
      return arr
    }
  },
  methods: {
    handleClick(page) {
      if (page < 1) page = 1
      if (page > this.pageNum) page = this.pageNum
      if (page === this.current) return
      this.$emit('page-change', page)
    }
  },
  data(){
    return {
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/styles/var.less";
.pager-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
  font-size: 20px;
  a {
    color: @cyber;
    margin: 0 7px;
    cursor: pointer;

    &.disabled {
      color: @lightWords;
      cursor: not-allowed;
    }

    &.active {
      color: @gold;
      font-weight: bold;
    }
  }
}
</style>